<template>
  <div class="sycartcory">
    <!-- <div class="cate-itme"
      v-for="shoplist in list"
      :key="`shoplist-${shoplist.id}`"
    >
      <div class="cate-itme-img">
        <img :src="shoplist.image" :alt="shoplist.qunTitle">
        https://img.alicdn.com/bao/uploaded/i4/2200711151795/O1CN01hPHnpP1P89YiwKCXO_!!2200711151795-0-lubanu-s.jpg
      </div>
      <p class="cate-itme-title">{{shoplist.title}}</p>
      <p class="cate-itme-intro">
        <span>￥ <b>{{shoplist.price}}</b></span>
        <span>销量: <b>{{shoplist.saleNum}}</b></span>
      </p>
    </div> -->
    <sycateitmes
      v-for="shoplist in list"
      :key="`shoplist-${shoplist.id}`"
      :id="shoplist.id"
      :title="shoplist.title"
      :price="shoplist.price"
      :saleNum="shoplist.saleNum"
      :image="shoplist.image"
      :qunTitle="shoplist.qunTitle"
      :type="shoplist.type"
    ></sycateitmes>
    <div class="btnbox">
      <button @click="loadmore" v-if="!isEnd">显示更多...</button>
      <p v-else>没有更多了...</p>
    </div>
  </div>
</template>

<script>
import sycateitmes from './sycateitmes.vue'

export default {
  data () {
    return {
      id: '',
      list: [],
      // 请求更多数据的初始索引
      start: 0,
      // 是否还有更多商品数据
      isEnd: false,
      // 截流的开关，是否重复加载，如果正在加载不允许重复请求
      loading: false
    }
  },
  components: {
    sycateitmes
  },
  created () {
    this.id = this.$route.params.id
    this.getData()
  },
  beforeRouteUpdate (to, from, next) {
    this.id = to.params.id
    next()
    // 如果切换到其他分类就清空刚才拼接的数据，重新渲染其他商品的数据，以免上个分类的数据还残留在
    this.start = 0
    this.list = []
    this.getData()
  },
  methods: {
    getData () {
      if (!this.loading) {
        this.loading = true
        this.$http.getCatecory(this.id, this.start).then(resp => {
          // 把显示更多的商品数组拼接到原来的list数组上，再变成新的数组
          this.list = this.list.concat(resp.items.list)
          this.start = resp.items.nextIndex
          this.isEnd = resp.items.isEnd
          this.loading = false
        })
      }
    },
    loadmore () {
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.sycartcory{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #7f8c8d;
  .btnbox{
    width: 100%;
    text-align: center;
    button, p{
      width: 80%;
      height: 30px;
      outline: none;
      border: 0px;
      border-radius: 15px;
      background-color:#f7f1e3;
    }
  }
//   .cate-itme{
//     width: 50%;
//     box-sizing: border-box;
//     padding: 5px;
//     // border: 1px solid #95a5a6;
//     border-radius: 5px;
//     .cate-itme-img{
//       width: 100%;
//       img{
//         width: 100%;
//         height: auto;
//       }
//     }
//     .cate-itme-intro{
//       display: flex;
//       justify-content: space-between;
//       b{
//         color: #e74c3c;
//       }
//     }
//     .cate-itme-title{
//       text-overflow: ellipsis;
//       overflow: hidden;
//       white-space: nowrap;
//     }
//   }
}
</style>
